<template>
  <div
    class="mine-page common-page"
    style="
      margin-bottom: env(safe-area-inset-bottom);
      margin-bottom: constant(safe-area-inset-bottom);
    "
  >
    <div class="baseinfo-box">
      <div class="left">
        <img :src="userInfo.headImg" alt="" />
        <div>
          <span>{{ userInfo.nickName }}</span>
          <div class="account-box">
            <span>用户ID:{{ userInfo.userId4Show.slice(0, 10) }}...</span>
            <div
              class="copy-img-box"
              @click="copyText(userInfo.userId4Show, $event)"
            >
              <img :src="copyImg" alt="" />
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <span>{{ couponCount }}</span>
        <span>现金券</span>
      </div>
    </div>
    <div class="my-order-box">
      <van-cell
        title="我的订单"
        is-link
        value="MORE"
        @click="enterToMyBlindBox"
      />
      <div class="my-order-tabs">
        <div
          class="order-item"
          v-for="(item, index) in tabList"
          :key="index"
          @click="enterToMyBlindBox(item)"
        >
          <img :src="item.img" alt="" />
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <van-cell-group>
      <van-cell
        is-link
        v-for="(item, index) in moreInfoList"
        :key="index"
        @click="enterToPage(item)"
      >
        <template #title>
          <img :src="item.url" alt="" />
          <span class="custom-title">{{
            item.label
          }}</span>
        </template>
        <template>
            <van-badge :content="boxCouponCount" v-if="item.path === '/boxCashCoupon'&&boxCouponCount"/>
        </template>
      </van-cell>
    </van-cell-group>
    <tabbar-custom active="2"></tabbar-custom>
  </div>
</template>

<script>
import { Cell, CellGroup } from "vant";
import { mapGetters } from "vuex";
import TabbarCustom from "@/components/TabbarCustom";
import apBox from "@/common/api/apBox";
import apiCash from "@/common/api/apiCash";
import Share from "./mixin/share";
import Clipboard from "clipboard";
const StatusEums = {
  NEGATIVE: 0,
  POSITIVE: 1,
  OPENED: 2,
  EXPRESS_INFO_SUBMITTED: 3,
  PRIZE_DELIVERED: 4,
  PRIZE_RECEIVED: 5,
};
const StatusDescEums = {
  NEGATIVE: "失效",
  POSITIVE: "待开启", //未打开
  OPENED: "待领取", //已打开
  EXPRESS_INFO_SUBMITTED: "待发货", //已填写收货信息
  PRIZE_DELIVERED: "已发货",
  PRIZE_RECEIVED: "已收货",
};

export default {
  name: "Mine",
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [TabbarCustom.name]: TabbarCustom,
  },
  mixins: [Share],
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      tabList: [
        {
          name: "1",
          label: "待开启",
          img: require("../common/imgs/to-open.png"),
        },
        {
          name: "2",
          label: "待领取",
          img: require("../common/imgs/to-receive.png"),
        },
        {
          name: "3",
          label: "待发货",
          img: require("../common/imgs/to-delive.png"),
        },
        {
          name: "4",
          label: "已发货",
          img: require("../common/imgs/shipped.png"),
        },
        {
          name: "5",
          label: "已收货",
          img: require("../common/imgs/received.png"),
        },
      ],
      moreInfoList: [
        {
          path: "/boxCashCoupon",
          label: "抽盒券",
          url: require("../common/imgs/discount-coupon.png"),
        },
        {
          path: "/leaveMessageList",
          label: "留言反馈",
          url: require("../common/imgs/leave-message-icon.png"),
        },
        {
          path: "/myAddress",
          label: "地址管理",
          url: require("../common/imgs/address-icon.png"),
        },
        {
          path: "/contactWays",
          label: "联系我们",
          url: require("../common/imgs/customer-icon.png"),
        },
      ],
      couponCount: 0, //现金券数量
      boxCouponCount: 0, //抽盒券数量
      copyImg: require("../common/imgs/copy-img.png"),
    };
  },
  created() {
    this.setShare();
    this.getNavNum();
  },
  mounted() {},
  methods: {
    //  跳转到我的订单
    enterToMyBlindBox(info) {
      if (info.name) {
        this.$router.push({
          path: "/myBlindBox",
          query: {
            activeName: info.name,
          },
        });
        return;
      }
      this.$router.push({
        path: "/myBlindBox",
      });
    },
    //  进去详情页面
    enterToPage(item) {
      let path = item.path;
      if (path === "/myAddress") {
        this.$router.push({
          path: path,
          query: {
            isNotBack: true,
          },
        });
        return;
      }
      this.$router.push({
        path: path,
      });
    },
    //  获取现金券数量
    getNavNum() {
      this.$toast.loading();
      this.$toast.loading();
      apBox
        .getNavNum({
          userId: this.userInfo.userId,
        })
        .then((data) => {
          this.$toast.clear();
          this.couponCount = data.data.cashCouponCount;
          this.boxCouponCount = Number(data.data.boxCouponCount);
        });
    },
    // 复制订单号
    copyText(text, e) {
      const clipboard = new Clipboard(e.target, {
        text: () => text,
      });
      clipboard.on("success", () => {
        this.copySuccess();
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", () => {
        // 不支持复制
        this.copyFail();
        // 释放内存
        clipboard.destroy();
      });
      // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
      clipboard.onClick(e);
    },
    copySuccess() {
      this.$toast.success("复制成功");
    },
    copyFail() {
      this.$toast.warning("该浏览器不支持自动复制");
    },
  },
};
</script>

<style lang="less" scoped>
@import "../common/css/common.less";
.mine-page {
  padding: 0;
}
.baseinfo-box {
  width: 100%;
  height: 324px;
  padding: 0 52px 0 24px;
  box-sizing: border-box;
  background: url("http://alivod.sdxgxx.cn/image/default/B9CC60702D22434998CE0097CFB5CFAF-6-2.png");
  background-size: 100% 324px;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    > img {
      width: 128px;
      height: 128px;
      background: #d8d8d8;
      border: 4px solid #ffffff;
      margin-right: 24px;
      border-radius: 50%;
    }
    div {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      height: 128px;
      > span {
        font-size: 42px;
        font-weight: 500;
        color: #ffffff;
        line-height: 58px;
      }
      .account-box {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        span {
          font-size: 24px;
          color: #ffffff;
          line-height: 34px;
          margin-top: 12px;
        }
        .copy-img-box {
          height: 30px;
          padding: 0 18px;
          img {
            width: 32px;
            height: 30px;
          }
        }
      }
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 128px;
    span:first-child {
      font-size: 44px;
      font-weight: 500;
      color: #ffffff;
      line-height: 60px;
    }
    span:nth-child(2) {
      font-size: 24px;
      font-weight: 400;
      color: #ffffff;
      line-height: 34px;
      margin-top: 12px;
    }
  }
}
.my-order-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 24px;
  box-sizing: border-box;
  margin-top: -48px;
  margin-bottom: 24px;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  .my-order-tabs {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    padding: 24px 0;
    div {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      img {
        width: 88px;
        height: 88px;
      }
      span {
        font-size: 24px;
        color: #222222;
        line-height: 34px;
        margin-top: 18px;
      }
    }
  }
}
.van-cell-group {
  margin: 0 24px;
  box-sizing: border-box;
  border-radius: 20px;
  overflow: hidden;
  .van-cell__title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    img {
      width: 44px;
      height: 44px;
      margin-right: 20px;
    }
  }
}
</style>
